
<!-- 我的待办 -->

<template>
  <div class="backlog">
    <div class="backlog-title">
      <div class="backlog-title-left">
        <div class="logo"></div>
        我的待办
      </div>
      <div class="backlog-title-right"></div>
    </div>
    <div class="backlog-content">
      <div class="backlog-content-item" v-for="item in 3" :key="item">
       <div class="left">
         <img src="@/assets/icons/委托单审核.png" alt="">
       </div>
        <div class="right">
          <div class="right-top">委托单审核</div>
          <div class="right-bottom">
            <img src="@/assets/icons/up-green.png" alt="">
            <div style="color: #1afa29">10</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: {},
    };
  },
  created() {},
};
</script>

<style lang='scss' scoped>
.backlog{
  height: 100%;
  padding: 0 0.1rem;
  &-title{
    height: 0.45rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &-left{
      display: flex;
      align-items: center;
      font-size: 0.14rem;
      font-weight: bold;
      .logo{
        width: 0.1rem;
        height: 0.3rem;
        background-color: rgb(209, 46, 46);
        margin-right: 0.1rem;
      }
    }
  }
  &-content{
    height: calc(100% - 0.45rem);
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    &-item{
      width: 30%;
      height: 70%;
      cursor: pointer;
      border-radius: 0.1rem;
      box-shadow: 0px 0px 2px 2px rgba(115, 182, 209, 0.4);
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      .left{
        width: 25%;
        height: 50%;
        border-radius: 50%;
        background-color: #ecf9ff;
        display: flex;
        justify-content: center;
        align-items: center;
        &>img{
          width: 80%;
          height: 80%;
        }
      }
      .right{
        width: 50%;
        height: 70%;
        font-size: 0.16rem;
        font-weight: bold;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        &-bottom{
          display: flex;
          align-items: center;
          &>div:last-child{
            font-size: 0.22rem;
          }
        }
      }
      &:hover{
        box-shadow: 0px 0px 3px 3px rgba(115, 182, 209, 0.7);
      }
    }
  }
}
</style>